import React, { useState, createContext, useContext, useEffect, useRef } from 'react';
import { Input, Picker } from 'antd-mobile'
import ScanCode from '@/components/ScanCode';
import PickerSelect from '@/components/PickerSelect';
import './index.less';

function Index ({ placeholderTxt, handlePress, LocationList, setLocationCOde,defaultValue }) {
    const [value, setValue] = useState('')
    const [visualScan, setVisualScan] = useState(false);
    const [ListPicker, setListPicker] = useState([])
    const [visible, setVisible] = useState(false)
    const [pickerValue, setPickerValue] = useState('')

    useEffect(() =>{
        defaultValue && setValue([defaultValue])
    },[defaultValue])


    useEffect(() => {
        if (LocationList?.length >= 1) {
            let m = LocationList.map(el => {
                return {
                    label: el.location,
                    value: el.locationCode
                }
            })
            setListPicker([m])
        }
    }, [LocationList])



    // 二维码扫描
    const getResult = (txt) => {
        setVisualScan(false)
        if (txt == '返回') {
            handlePress('')
        } else {
            handlePress(txt)
        }
    }

    return (
        <div className='scan-input-box'>
            <div className="input-box">
                <Input
                    style={{
                        '--placeholder-color': "#333"
                    }}
                    placeholder={placeholderTxt}
                    value={value}
                    onClick={() => setVisible(true)}
                    onEnterPress={() => handlePress(value)}
                    onChange={val => {
                        setValue(val)
                    }}
                />
            </div>
            <div className="scan-img">
                <img onClick={() => setVisualScan(true)} src={require("../../assets/img/icon_scan.png").default} alt="" />
            </div>
            {
                visualScan ? <ScanCode getResult={getResult}></ScanCode> : null
            }

            <Picker
                columns={ListPicker}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                style={{
                    '--item-height': '30px'
                }}
                value={pickerValue}
                onConfirm={v => {
                    console.log(v,'v');
                    setPickerValue(v)
                    setLocationCOde(v)
                    setValue(LocationList?.find(el=>el.locationCode == v).location)
                }}
            />
        </div>
    );
}

export default Index;
